<template>
  <div class="code-drawer">
    <div class="code-but-operation mb-15">
      <span class="s">是否多选</span>
      <el-select v-model="propsData.tableProp.isCheckbox" placeholder="是否多选" style="width: 70px" @change="checkboxChange">
        <el-option
            v-for="item in $store.state.booleanOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span class="s">是否批量删除</span>
      <el-select v-model="propsData.tableProp.isBatchBut" placeholder="是否多选" style="width: 70px" @change="batchButChange">
        <el-option
            v-for="item in $store.state.booleanOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="code-but-operation">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加表头前按钮</el-button>
    </div>
    <!--配置按钮-->
    <draggable v-model=" propsData.tableProp.headButArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.tableProp.headButArray" :key="key">
        <li>
          <span>按钮名称</span>
          <el-input v-model="item.name" placeholder="按钮名称" clearable></el-input>
        </li>
        <li>
          <span>按钮方法名称</span>
          <el-input v-model="item.methodName" placeholder="按钮方法名称" clearable></el-input>
        </li>
        <li class="but-color">
          <span>按钮颜色</span>
          <el-select v-model="item.color" placeholder="按钮颜色">
            <el-option
                v-for="item in $store.state.butColorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="but-icon">
          <span>按钮图标</span>
          <e-icon-picker v-model="item.icon">
            <template #prepend="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
            <template #icon="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
          </e-icon-picker>
        </li>
        <li>
          <span>选择操作表单</span>
          <el-select v-model="item.choiceFrom" placeholder="选择操作表单">
            <el-option
                v-for="item in propsData.formProp.formData"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </li>
        <li class="but-color2">
          <span style="width: 80px">表单属性</span>
          <el-select v-model="item.formType" placeholder="表单属性">
            <el-option
                v-for="item in $store.state.formTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除</el-button>
        </li>
      </ul>
    </draggable>
    <div class="code-br mt-15"></div>
    <div class="code-but-operation mt-15">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addTableData">添加表格内容</el-button>
    </div>
    <div class="code-but-operation mb-15 mt-15">
      <span class="s">表格数据解析</span>
      <el-input v-model="propsData.tableProp.dataParsing" placeholder="请输入搜索数据解析" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable class="mr-12 "></el-input>
      <el-button type="primary" @click="startParsingClick">开始解析</el-button>
    </div>
    <draggable v-model=" propsData.tableProp.tableArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.tableProp.tableArray" :key="key">
        <li>
          <span>字段名称</span>
          <el-input v-model="item.name" placeholder="字段名称" clearable></el-input>
        </li>
        <li>
          <span>字段</span>
          <el-input v-model="item.field" placeholder="字段" clearable></el-input>
        </li>
        <li class="but-type">
          <span>数据类型</span>
          <el-select v-model="item.type" placeholder="数据类型">
            <el-option
                v-for="item in $store.state.tableTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="item.optionField" v-if="item.type.includes('单选框') || item.type.includes('多选框') || item.type.includes('下拉框')" placeholder="选择下拉选项">
            <el-option
                v-for="item in propsData.optionProp.optionArray"
                :key="item.value"
                :label="item.notes"
                :value="item.field">
            </el-option>
          </el-select>
        </li>
        <li class="del">
          <el-button type="danger" @click="delTableClick(key)">删除表格内容</el-button>
        </li>
      </ul>
    </draggable>
    <div class="code-br mt-15"></div>
    <div class="code-but-operation mt-15">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addOperationButton">添加操作按钮</el-button>
    </div>
    <!--配置按钮-->
    <draggable v-model=" propsData.tableProp.operationButArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.tableProp.operationButArray" :key="key">
        <li>
          <span>按钮名称</span>
          <el-input v-model="item.name" placeholder="按钮名称" clearable></el-input>
        </li>
        <li>
          <span>按钮方法名称</span>
          <el-input v-model="item.methodName" placeholder="按钮方法名称" clearable></el-input>
        </li>
        <li class="but-color">
          <span>按钮颜色</span>
          <el-select v-model="item.color" placeholder="按钮颜色">
            <el-option
                v-for="item in $store.state.butColorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="but-icon">
          <span>按钮图标</span>
          <e-icon-picker v-model="item.icon">
            <template #prepend="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
            <template #icon="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
          </e-icon-picker>
        </li>
        <li>
          <span>选择操作表单</span>
          <el-select v-model="item.choiceFrom" placeholder="选择操作表单">
            <el-option
                v-for="item in propsData.formProp.formData"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </li>
        <li class="but-color2">
          <span style="width: 80px">表单属性</span>
          <el-select v-model="item.formType" placeholder="表单属性">
            <el-option
                v-for="item in $store.state.formTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除</el-button>
        </li>
      </ul>
    </draggable>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //是否多选 change
    checkboxChange(val) {
      if (!val) {
        this.propsData.tableProp.isBatchBut = false;
      }
    },
    //是否批量删除 change
    batchButChange(val) {
      if (val) {
        this.propsData.tableProp.isCheckbox = true;
      }
    },
    //添加表头按钮
    addBut() {
      let jsonData = {
        name: '',//按钮名称
        methodName: '',//按钮方法名称
        icon: 'el-icon-check',//按钮图标
        color: 'primary',//按钮颜色
        choiceFrom: '',//选择操作表单
        formType: '',//表单属性
      }
      this.propsData.tableProp.headButArray.push(jsonData)
    },
    //删除表头按钮
    delBut(key) {
      this.propsData.tableProp.headButArray.splice(key, 1)
    },
    //表格内容解析
    startParsingClick() {
      if (!this.propsData.tableProp.dataParsing) {
        return false
      }
      let dataParsing = this.propsData.tableProp.dataParsing.split('\n');
      for (let i = 0; i < dataParsing.length; i++) {
        let data = dataParsing[i].trim().split(';//');
        let fieldJsonData = {
          name: data[1],//字段名称 用于注释
          field: data[0],//字段
          type: '输入框',//数据类型
          optionField: '',//选项字段
        }
        this.propsData.tableProp.tableArray.push(fieldJsonData);
      }
      this.$message.success('解析成功')
    },
    //添加表格内容
    addTableData() {
      let jsonData = {
        name: '',//字段名称 用于注释
        field: '',//字段
        type: '输入框',//数据类型
        optionField: '',//选项字段
      }
      this.propsData.tableProp.tableArray.push(jsonData);
    },
    //删除表格内容
    delTableClick(key) {
      this.propsData.tableProp.tableArray.splice(key, 1);
    },
    //添加操作按钮
    addOperationButton(){
      let jsonData = {
        name: '',//按钮名称
        methodName: '',//按钮方法名称
        icon: 'el-icon-check',//按钮图标
        color: 'primary',//按钮颜色
        choiceFrom: '',//选择操作表单
        formType: '',//表单属性
      }
      this.propsData.tableProp.operationButArray.push(jsonData)
    },
  },
};
</script>

<style lang="scss" scoped></style>
